<template>
	<view>
		<!-- 导航 -->
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @clickLeft="openLeftSearch()"
		 @clickRight="uploadMediaAction()">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class="mx-4" @click="changeTab(index)"
				v-for="(item,index) in tabBars" :key="index"
				:class="tabIndex === index ? 'font-md text-black border-bottom' : 'font-md text-light-muted'">
					{{item.name}}
				</view>
			</view>
			<text slot="left" class="iconfont iconsousuo ml-2" style="font-size: 48rpx;"></text>
			<text slot="right" class="iconfont iconkepushipin-fabu" style="font-size: 48rpx;color: #FC6767;"></text>
		</uni-nav-bar>
		<view style="height: 4rpx;" class="mt-2"></view>
		<swiper :current="tabIndex" :duration="150" :style="'height:'+scrollH+'px;'" @change="onChangeTab">
			<!-- 科普 -->
			<swiper-item>
				<view class="example-body">
					<uni-grid :column="2" :highlight="true" @change="change" :square="false" :showBorder="false">
						<uni-grid-item v-for="(item, index) in sciencelist" :index="index" :key="index">
							<popular-item :item="item" :index="index" :gridWidth="gridWidth"></popular-item>
						</uni-grid-item>
					</uni-grid>
				</view>
			</swiper-item>
			<!-- 关注 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'"
				@scrolltolower="loadmoreEvent">
					<block v-for="(item,index) in lawyerlist" :key="index">
						<conversation :item="item" :index="index"></conversation>
						<divider></divider>
					</block>
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
	// 测试数据
	const lawyerdemo = [{
		username:"王刚",
		avatar:"/static/default.jpg",
		picurl:"https://img.xiaopiu.com/userImages/img6159694579f0.jpeg",
		title:"上班一个月，公司单方面解除，不发工资该怎么做拿回钱？超过两行啊省略…",
		newstime:"02:05",
		location:"上海市",
		view_count:100
	},
	{
		username:"王娟",
		avatar:"/static/default.jpg",
		picurl:"https://img.xiaopiu.com/userImages/img6159694579f0.jpeg",
		title:"上班一个月，公司单方面解除，不发工资该怎么做拿回钱？超过两行啊省略…",
		newstime:"02:05",
		location:"上海市",
		view_count:100
	}];
	const sciencedemo = [{
		avatar:"/static/default.jpg",
		picurl:"https://img.xiaopiu.com/userImages/img6159694579f0.jpeg",
		title:"被公司单方面解决劳动合同该怎么办？",
		newstime:"02:05",
		view_count:100
	},{
		avatar:"/static/default.jpg",
		picurl:"https://img.xiaopiu.com/userImages/img315969455ab0.jpg",
		title:"被公司单方面解决劳动合同该怎么办？",
		newstime:"02:05",
		view_count:100
	},{
		avatar:"/static/default.jpg",
		picurl:"https://img.xiaopiu.com/userImages/img6159694579f0.jpeg",
		title:"被公司单方面解决劳动合同该怎么办？",
		newstime:"02:05",
		view_count:100
	},{
		avatar:"/static/default.jpg",
		picurl:"https://img.xiaopiu.com/userImages/img315969455ab0.jpg",
		title:"被公司单方面解决劳动合同该怎么办？",
		newstime:"02:05",
		view_count:100
	}];
	import conversation from '@/components/common/conversation.vue';
	import loadMore from '@/components/common/load-more.vue';
	import popularItem from '@/components/news/popular-item.vue';
	export default {
		components: {
			conversation,
			loadMore,
			popularItem
		},
		data() {
			return {
				scrollH:500,
				gridWidth:160,
				tabIndex:0,
				tabBars:[{
					name:"科普"
				},{
					name:"关注"
				}],
				// 关注列表
				lawyerlist:[],
				sciencelist:[],
				// 1.上拉加载更多  2.加载中... 3.没有更多了
				loadmore:"上拉加载更多",
			}
		},
		onLoad(e) {
			// 初始化
			if (e.result) {
				this.__init(JSON.parse(e.result))
			};
			uni.getSystemInfo({
				success:res=>{
					this.gridWidth = res.windowWidth/2-32 ;
					this.scrollH = res.windowHeight - res.statusBarHeight - 44;
					// console.log(this.gridWidth);
					// console.log(uni.upx2px(120));
				}
			});
			// 加载测试数据
			this.lawyerlist = lawyerdemo;
			this.sciencelist = sciencedemo;
			// console.log(this.lawyerlist);
		},
		methods: {
			__init(data){
				// 修改标题
				// console.log(data);
			},
			change(e) {
				let {
					index
				} = e.detail
				console.log(index);
				this.lawyerlist[index].view_count && this.lawyerlist[index].view_count++
			
				this.navigateTo({
					url:"../swiper-video/swiper-video"
				})
			},
			// 点击左上角搜索
			openLeftSearch() {
				uni.navigateTo({
					 url:"../search/search"
				});
			},
			// 点击右上角上传
			uploadMediaAction() {
				uni.navigateTo({
					url: '../add_media/add_media'
				});
			},
			// 切换选项卡
			changeTab(index){
				this.tabIndex = index
			},
			// 滑动
			onChangeTab(e){
				this.tabIndex = e.detail.current
			},
			// 上拉加载
			loadmoreEvent(){
				// 验证当前是否处于可加载状态
				if (this.loadmore !== '上拉加载更多') return;
				// 设置加载状态
				this.loadmore = '加载中...'
				// 模拟请求数据
				setTimeout(()=>{
					// 加载数据
					this.list = [...this.list,...this.list]
					// 设置加载状态
					this.loadmore = '上拉加载更多'
				},2000)
			},
		}
	}
</script>

<style>
page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #FFFFFF;
		min-height: 100%;
		height: auto;
	}
	.uni-grid-item:nth-of-type(odd) {
		padding: 8rpx 8rpx 8rpx 24rpx;
	}
	
	.uni-grid-item:nth-of-type(even) {
		padding: 8rpx 24rpx 8rpx 8rpx;
	}
</style>
